import React, { useState } from "react";
import {
  Button,
  Space,
  Card,
  Divider,
  Switch,
  Input,
  Radio,
  ColorPicker,
} from "antd";
import { InfoCircleOutlined } from "@ant-design/icons";
import Modal from "../components/Modal";
import styles from "./styles/modalDemo.module.css";

const ModalDemo: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [customVisible, setCustomVisible] = useState(false);

  // 自定义配置状态
  const [disabled, setDisabled] = useState(false);
  const [titleType, setTitleType] = useState<"text" | "custom">("text");
  const [backgroundColor, setBackgroundColor] = useState("#ffffff");
  const [titleText, setTitleText] = useState("自定义标题");

  // 简单示例的打开和关闭处理函数
  const showModal = () => setVisible(true);
  const handleOk = () => {
    console.log("确定");
    setVisible(false);
  };
  const handleCancel = () => setVisible(false);

  // 自定义示例的打开和关闭处理函数
  const showCustomModal = () => setCustomVisible(true);
  const handleCustomOk = () => {
    console.log("自定义确定");
    setCustomVisible(false);
  };
  const handleCustomCancel = () => setCustomVisible(false);

  // 构建自定义标题
  const customTitle =
    titleType === "text" ? (
      titleText
    ) : (
      <div
        className="custom-title-wrapper"
        style={{
          display: "flex",
          alignItems: "center",
          color: "#1677ff",
          fontWeight: "bold",
        }}
      >
        <InfoCircleOutlined style={{ marginRight: 8 }} />
        {titleText}
      </div>
    );

  return (
    <div className={styles.container}>
      <h1>自定义 Modal 组件示例</h1>

      <Card title="基本示例" className={styles.marginBottom}>
        <Button type="primary" onClick={showModal}>
          打开基本对话框
        </Button>
        <Modal
          visible={visible}
          title="基本对话框"
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <p>这是一个基本的对话框示例，使用了自定义的 Modal 组件。</p>
          <p>它包含了一个确定按钮和右上角的关闭按钮。</p>
        </Modal>
      </Card>

      <Card title="自定义配置示例" className={styles.marginBottom}>
        <Space direction="vertical" style={{ width: "100%" }}>
          <Space>
            <span>确定按钮禁用:</span>
            <Switch checked={disabled} onChange={setDisabled} />
          </Space>

          <Space>
            <span>标题类型:</span>
            <Radio.Group
              value={titleType}
              onChange={(e) => setTitleType(e.target.value)}
            >
              <Radio value="text">文本</Radio>
              <Radio value="custom">自定义</Radio>
            </Radio.Group>
          </Space>

          <Space>
            <span>标题文本:</span>
            <Input
              value={titleText}
              onChange={(e) => setTitleText(e.target.value)}
              className={styles.inputField}
            />
          </Space>

          <Space>
            <span>背景色:</span>
            <ColorPicker
              value={backgroundColor}
              onChange={(_, hexString) => setBackgroundColor(hexString)}
              className={styles.colorPicker}
            />
          </Space>

          <Button
            type="primary"
            onClick={showCustomModal}
            className={styles.marginTop}
          >
            打开自定义对话框
          </Button>
        </Space>

        <Modal
          visible={customVisible}
          title={customTitle}
          onOk={handleCustomOk}
          onCancel={handleCustomCancel}
          okDisabled={disabled}
          backgroundColor={backgroundColor}
          okText="提交"
          okButtonProps={{ size: "large" }}
        >
          <div>
            <p>这是一个高度自定义的对话框。</p>
            <p>你可以调整上方的配置，查看不同配置下的效果。</p>
          </div>
        </Modal>
      </Card>

      <Divider />

      <Card title="使用说明">
        <pre className={styles.codeBlock}>
          {`import Modal from '@/components/Modal';

// 基本用法
const [visible, setVisible] = useState(false);

<Modal
  visible={visible}
  title="对话框标题"
  onOk={() => {
    // 处理确定逻辑
    setVisible(false);
  }}
  onCancel={() => setVisible(false)}
>
  对话框内容
</Modal>

// 自定义配置
<Modal
  visible={visible}
  title={<div style={{ color: 'blue' }}>自定义标题</div>}
  onOk={handleOk}
  onCancel={handleCancel}
  okDisabled={!isFormValid}
  okText="提交"
  backgroundColor="#f9f9f9"
  width={800}
>
  更丰富的内容
</Modal>`}
        </pre>
      </Card>
    </div>
  );
};

export default ModalDemo;
